<template>
  <view class="container">
    <view v-for="(item,index) in fruit" :key="item.id">{{ item.id }} -- {{item.name}} -- {{index}}</view>
    <view v-for="item in filterlist" :key="item.id">{{item.name}}</view>
	<view>
		子组件传递过来的路径:{{ src }}
	</view>
	<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
	<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
  </view>
</template>

<script>
import imgBorder from "@/components/img-border";
export default {
	data () {
		return {
			list: [
				{
					id:0,
					name: '苹果'
				},
				{
					id:1,
					name:'香蕉'
				},
				{
					id:2,
					name:'西瓜'
				}
			],
			src:"",
			src1: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1816689961,667730901&fm=26&gp=0.jpg",
			src2: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=22030796,2789680810&fm=26&gp=0.jpg"
		}
	},
	computed: {
			fruit(){
				return this.list;
			},
			filterlist() {
				return this.list.filter(v=>v.id<=1);
			}
		},
	components: {
		imgBorder
	},
	methods: {
		handleSrcChange(e){
			this.src=e
		}
	}

};
</script>

<style>
	.img-border {
		border-radius: 50%;
	}
</style>
